{extend name="admin@index_layout"/}
{block name="main"}
<div class="layui-card">
    <style>
        body {
            overflow: hidden;
        }
        /*.layui-table-view {*/
        /*    overflow: hidden !important;*/
        /*}*/
    </style>
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <div class="layui-tab-content">
                <div class="layui-tab" lay-filter="demo">
                    <ul class="layui-tab-title">
                        <li class="layui-this">素材分类</li>
                        <li>商品选择</li>
                        <li>图文内容</li>
                        <li>列表资料</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="height: 750px;">
                            <iframe id="tab-frame-0" src="" frameborder="0" scrolling="no"
                                    style="width:100%; height:900px !important; overflow: hidden;"></iframe>
                        </div>
                        <div class="layui-tab-item">
                            <iframe id="tab-frame-1" src="" frameborder="0" style="width:100%; height:650px;"></iframe>
                        </div>
                        <div class="layui-tab-item">
                            <iframe id="tab-frame-2" src="" frameborder="0" style="width:100%; height:650px;"></iframe>
                        </div>
                        <div class="layui-tab-item">
                            <iframe id="tab-frame-3" src="" frameborder="0" style="width:100%; height:650px;"></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element, layer = layui.layer;

        // 初始化加载第一个 tab 的内容
        let firstUrl = "{:url('marketing/content/category')}";
        $('#tab-frame-0').attr('src', firstUrl);

        element.on('tab(demo)', function (data) {
            let index = data.index;
            let url = '';
            switch (index) {
                case 0:
                    url = "{:url('marketing/content/category')}";
                    break;
                case 1:
                    url = "{:url('marketing/content/goods')}";
                    break;
                case 2:
                    url = "{:url('marketing/content/article')}";
                    break;
                case 3:
                    url = "{:url('marketing/content/setting')}";
                    break;
            }
            $('#tab-frame-' + index).attr('src', url);
        });
    });
</script>
{/block}
